import { getImageApi } from '@/api/user/user'
import { ref, onMounted } from 'vue'

export default function useImage() {
  // 注意这个ref和onMounted是在ts代码中被执行的
  // 他是在setup语法糖的内部被引入的
  const imgSrc = ref('')
  const getImage = async () => {
    await getImageApi().then(res => {
      console.log(res); // 这里把获取到的arraybuffer格式的数据转换成base64格式
      return 'data:image/png;base64,' + btoa(
        new Uint8Array(res.data as any).reduce((data, byte) => data + String.fromCharCode(byte), '')
      )
    }).then(data => {
      // 获取声明的数据都需要加一个value，通过proxy代理之后要获取就这么干
      imgSrc.value = data;
    })
  }
  // 代码中使用钩子函数的方式，vue3最常用的钩子函数
  onMounted(() => {
    getImage()
  })

  return {
    imgSrc,
    getImage
  }
}